<template>
  <div>
    <van-nav-bar
      title="DLY_华硕商城"
      right-text="。。。"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="top">
      <img
        src="https://static.asus.com.cn/store/20230130/10420610154555.jpg"
        alt=""
      />
    </div>
    <div class="top1">
      <img
        src="https://static.asus.com.cn/store/20221128/11195699545410.jpg"
        alt=""
      />
    </div>
    <div class="boxs">
      <div class="box" v-for="(v, index) in arr" :key="index">
        <div class="box1">
          <img :src="v" alt="" />
        </div>
        <div class="tex1">{{ text1[index] }}</div>
        <div class="tex2">{{ text2[index] }}</div>
        <div class="money">￥{{ money[index] }}</div>
      </div>
    </div>
    <div class="title">
      <img src="https://static.asus.com.cn/store/20221128/11222549521005.jpg" />
    </div>
    <div class="boxs">
      <div class="box" v-for="(v, index) in arr2" :key="index">
        <div class="box1">
          <img :src="v" alt="" />
        </div>
        <div class="tex1">{{ texts[index] }}</div>
        <div class="tex2">{{ text2[index] }}</div>
        <div class="money">￥{{ money2[index] }}</div>
      </div>
    </div>
    <div class="title2">
      <img src="https://static.asus.com.cn/store/20221128/11220510010148.jpg" />
    </div>
    <div class="boxs">
      <div class="box" v-for="(v, index) in arr3" :key="index">
        <div class="box1">
          <img :src="v" alt="" />
        </div>
        <div class="tex1">{{ texts1[index] }}</div>
        <div class="tex2">{{ texts2[index] }}</div>
        <div class="money">￥{{ money3[index] }}</div>
        <div class="originalprice">{{ originalprice[index] }}</div>
      </div>
    </div>
      <div class="title3">
      <img src="https://static.asus.com.cn/store/20221128/11230557515798.jpg" />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);

import { Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);
export default {
  data() {
    return {
      arr: [],
      text1: [],
      text2: [],
      money: [],
      arr2: [],
      texts: [],
      money2: [],
      arr3: [],
      texts1: [],
      texts2: [],
      money3: [],
      originalprice: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({path:'/total'}).catch(err=>{})
    },
  },
  mounted() {
    this.$http({
      url: "http://localhost:3000/navigation7",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        element.data.data1.forEach((item) => {
          this.arr.push(item.myimg);
          this.text1.push(item.urname);
          this.text2.push(item.introduce);
          this.money.push(item.money);
        });
      });
      res.data.forEach((element) => {
        element.data.data2.forEach((item) => {
          this.arr2.push(item.myimg);
          this.texts.push(item.urname);
          this.money2.push(item.money);
        });
      });
      res.data.forEach((element) => {
        element.data.data3.forEach((item) => {
          this.arr3.push(item.myimg);
          this.texts1.push(item.urname);
          this.texts2.push(item.introduce);
          this.money3.push(item.money);
          this.originalprice.push(item.befor);
        });
      });
    });
  },
};
</script>

<style scoped>
.top {
  width: 375px;
  height: 400px;
}
.title,
.title2 {
  width: 375px;
  height: 50px;
  margin-bottom: 15px;
}
.title3{
    width: 375px;
  margin-bottom: 15px;
    height: 115px;
}
.title3 img {
  width: 100%;
  height: 100%;
}
.title2 img {
  width: 100%;
  height: 100%;
}
.title img {
  width: 100%;
  height: 100%;
}
.top img {
  width: 100%;
  height: 100%;
}
.top1 {
  width: 375px;
  height: 115px;
}
.top1 img {
  width: 100%;
  height: 100%;
}
.boxs {
  width: 375px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  width: 48%;
  height: 300px;
  margin-bottom: 15px;
}
.box1 {
  width: 100%;
  height: 200px;
  background-color: aqua;
}
.box1 img {
  width: 100%;
  height: 100%;
}
.tex1 {
  height: 30px;
  line-height: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.tex2 {
  height: 30px;
  font-size: 14px;
  color: dimgray;
  line-height: 30px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.money {
  color: red;
  font-weight: 600;
  font-size: 18px;
}
.originalprice {
  text-decoration: line-through;
  font-size: 14px;
}
</style>